<script lang='ts' setup>
import { reactive,onMounted,ref} from 'vue'
import type { FormInstance, FormRules, } from 'element-plus'

const state = reactive({ 
	current: 1,
	baseSettng: {
		job: '',
		basicSalary: 5000,
		cellCommission: 15,
		useCommission: 12,
		serviceCommission: 2,
		parentJob: '',
		parentJobList: [
			{label: '超级管理员 - 总部', value: 1},
			{label: '测试总部岗 - 总部', value: 2},
			{label: '无首页岗位 - 总部', value: 3},
		]
	},
	powerSetting: {
		jobType: 1,
		parentChecked: false, 
		storeChecked: false,
	},
	targetSetting: {
		performanceTarget: 10000,
		cellTarget: 5000,
		rechargeTarget: 300,
		useTarget: 7000,
		manualTarget: 600,
		newUserTarget: 50,
	},
	dialog:{
		isShowDialog:false,
	}
}) 

const ruleFormRef = ref<FormInstance>()
const parentPowerNode = ref()
const storePowerNode = ref()

const rules = reactive<FormRules<any>>({
	job: [
		{ required: true, message: '请输入岗位名称', trigger: 'blur' }, 
	],
	basicSalary: [
		{ required: true, message: '请输入底薪(元)', trigger: 'blur' }, 
	],
})

// const props = withDefaults(defineProps<{
//     id: number,
//     modelValue: boolean,
//     statistics: number
// 	status: number
// }>(), {
//     statistics: 1,
// 	title: '',
// 	status: 1
// })

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}

const toggle = (i: number) => {
    state.current = i
}

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			state.current = 2
		} else {
			console.log('error submit!', fields)
		}
	})
}

const defaultProps = {
	children: 'children',
	label: 'label',
	disabled: 'disabled',
}

const data = [
	{
		id: 1,
		label: '统计',
		children: [
			{
				id: 3,
				label: '经营报表',
			},
			{
				id: 2,
				label: '收入统计',

			},
		],
	},
]

const nextHandle = () => state.current = 3;
const confirmHandle = () => {

}

const parentChangeAll = (e: boolean) => {
	//parentPowerNode.value!.setCheckedNodes(e ? [3,2]: [])
	if(e) {
		parentPowerNode.value!.setCheckedKeys([3,2], false)
	} else {
		parentPowerNode.value!.setCheckedKeys([], false)
	}
	
}

const storeChangeAll = (e: any) => {
	if(e) {
		storePowerNode.value!.setCheckedKeys([3,2], false)
	} else {
		storePowerNode.value!.setCheckedKeys([], false)
	}
}

// 打开弹窗
const openDialog = (type: string, row?: any) => {
	// if (type === 'edit') {
	// 	state.dialog.title = '商品分类编辑';
	// 	state.dialog.submitTxt = '修 改';
    //     state.ruleForm =  {
    //         type: categoryType,
    //         id: row.id,
    //         name: row.name, // 模板名称
    //         ids:[] as Array<number>,
    //         value: '',  // input 框添加项的值
    //         pic:'',
    //         bigPic:'',
    //         sort: row.sortNumber, 
	// 	};
	// } else {
	// 	state.dialog.title = '商品分类新增';
	// 	state.dialog.submitTxt = '新 增';
	// 	state.ruleForm =  {
    //         type: categoryType,
    //         id: null,
    //         name: '', // 模板名称
    //         ids:[] as Array<number>,
    //         value: '',  // input 框添加项的值
    //         pic:'',
    //         bigPic:'',
    //         sort: 1, 
	// 	};
	// }
	state.dialog.isShowDialog = true;
};


// 暴露变量
defineExpose({
	openDialog,
});


</script>

<template>
    <main>
        <el-dialog v-model="state.dialog.isShowDialog" title="岗位设置" @close="closeDialog" style="width: 1000px;" center>
            <section class="edit-info-wrapper">
				<section class="left-nav">
					<section class="left-nav-item" @click="toggle(1)" :class="[state.current === 1 ? 'active-nav' : '']">
						<el-icon size="18"><svg t="1702977602737" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4842" width="18" height="18"><path d="M944.48 552.458667l-182.357333 330.666666a73.792 73.792 0 0 1-64.565334 38.325334h-362.133333a73.792 73.792 0 0 1-64.565333-38.325334l-182.357334-330.666666a75.338667 75.338667 0 0 1 0-72.682667l182.357334-330.666667a73.792 73.792 0 0 1 64.565333-38.325333h362.133333a73.792 73.792 0 0 1 64.565334 38.325333l182.357333 330.666667a75.338667 75.338667 0 0 1 0 72.682667z m-55.989333-31.146667a10.773333 10.773333 0 0 0 0-10.378667l-182.037334-330.666666a10.517333 10.517333 0 0 0-9.205333-5.482667H335.733333a10.517333 10.517333 0 0 0-9.205333 5.482667l-182.037333 330.666666a10.773333 10.773333 0 0 0 0 10.378667l182.037333 330.666667a10.517333 10.517333 0 0 0 9.205333 5.472h361.514667a10.517333 10.517333 0 0 0 9.205333-5.472l182.037334-330.666667zM513.738667 682.666667c-94.261333 0-170.666667-76.405333-170.666667-170.666667s76.405333-170.666667 170.666667-170.666667c94.250667 0 170.666667 76.405333 170.666666 170.666667s-76.416 170.666667-170.666666 170.666667z m0-64c58.912 0 106.666667-47.754667 106.666666-106.666667s-47.754667-106.666667-106.666666-106.666667-106.666667 47.754667-106.666667 106.666667 47.754667 106.666667 106.666667 106.666667z"  p-id="4843"></path></svg></el-icon>
						<span>基本设置</span>
					</section>
					<section class="left-nav-item" @click="toggle(2)" :class="[state.current === 2 ? 'active-nav' : '']">
						<el-icon size="18"><svg t="1702977674312" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6104" width="18" height="18"><path d="M789.44 898.24H234.56A138.56 138.56 0 0 1 96 759.68v-274.24a138.56 138.56 0 0 1 138.56-138.56h554.88A138.56 138.56 0 0 1 928 485.44v274.24a138.56 138.56 0 0 1-138.56 138.56zM234.56 416a69.44 69.44 0 0 0-69.12 69.44v274.24a69.44 69.44 0 0 0 69.12 69.44h554.88a69.44 69.44 0 0 0 69.12-69.44v-274.24A69.44 69.44 0 0 0 789.44 416z" p-id="6105" ></path><path d="M640 777.92a155.2 155.2 0 1 1 109.44-45.44A152.96 152.96 0 0 1 640 777.92zM640 544a78.08 78.08 0 0 0-54.72 22.72A77.44 77.44 0 0 0 640 700.16a77.44 77.44 0 0 0 55.04-132.16A79.36 79.36 0 0 0 640 544z" p-id="6106" ></path><path d="M746.24 704.32l131.2 127.04-22.08 22.08-131.2-127.04 22.08-22.08z"  p-id="6107"></path><path d="M855.36 880.64l-159.04-154.24 49.6-49.28 159.36 154.24-49.92 49.28z" p-id="6108" ></path><path d="M269.44 416a34.88 34.88 0 0 1-34.88-34.88v-43.84a277.44 277.44 0 0 1 537.28-96 34.56 34.56 0 0 1-20.16 44.48 34.88 34.88 0 0 1-44.8-20.16A208 208 0 0 0 304 337.28v43.84A34.88 34.88 0 0 1 269.44 416z" p-id="6109" ></path></svg></el-icon>
						<span>权限设置</span>
					</section>
					<section class="left-nav-item" @click="toggle(3)" :class="[state.current === 3 ? 'active-nav' : '']">
						<el-icon size="18"><svg t="1702977719532" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7372" width="18" height="18"><path d="M511.808 448a64 64 0 0 0 0 128h0.384a64 64 0 0 0 0-128h-0.384z"  p-id="7373"></path><path d="M512 981.312A469.312 469.312 0 1 0 512 42.624a469.312 469.312 0 0 0 0 938.688z m-381.632-512a384.128 384.128 0 0 1 338.944-338.944V256a42.688 42.688 0 1 0 85.376 0V130.368a384.192 384.192 0 0 1 338.944 338.944H768a42.688 42.688 0 1 0 0 85.376h125.632a384.128 384.128 0 0 1-338.944 338.944V768a42.688 42.688 0 1 0-85.376 0v125.632a384.128 384.128 0 0 1-338.944-338.944H256a42.688 42.688 0 1 0 0-85.376H130.368z"  p-id="7374"></path></svg></el-icon>
						<span>目标设置</span>
					</section>
				</section>

				<section class="right-container">
					<section class="base-setting" v-show="state.current === 1">
						<el-form ref="ruleFormRef" :model="state.baseSettng"
							:rules="rules"  label-width="120px"
							class="demo-ruleForm" status-icon>
							<el-form-item label="岗位名称" prop="job">
								<el-input v-model="state.baseSettng.job" placeholder="请输入岗位名称" />
							</el-form-item>
							<el-form-item label="底薪(元)" prop="basicSalary">
								<el-input v-model="state.baseSettng.basicSalary" placeholder="请输入底薪(元)" />
							</el-form-item>
							<el-form-item label="销售提成(%)" prop="name">
								<el-input v-model="state.baseSettng.cellCommission" placeholder="请输入销售提成" />
							</el-form-item>
							<el-form-item label="消耗提成(%)" prop="name">
								<el-input v-model="state.baseSettng.useCommission" placeholder="请输入消耗提成" />
							</el-form-item>
							<el-form-item label="服务手工(元)" prop="name">
								<el-input v-model="state.baseSettng.serviceCommission" placeholder="请输入服务手工" />
							</el-form-item>
							<el-form-item label="上级岗位" prop="region">
								<el-select v-model="state.baseSettng.parentJob" placeholder="没有选择默认创建一级岗位" class="w100">
										<el-option v-for="item in state.baseSettng.parentJobList" :key="item.value"
											:label="item.label" :value="item.value" />
									</el-select>
							</el-form-item>
						</el-form>
						<section style="text-align: center;" class="mt30">
							<el-button @click="submitForm(ruleFormRef)">取消</el-button>
							<el-button type="primary" @click="submitForm(ruleFormRef)">下一步</el-button>
						</section>
					</section>
					<section class="power-setting" v-show="state.current === 2">
						<el-form-item label="岗位类型：" prop="job" >
							<el-radio-group v-model="state.powerSetting.jobType">
								<el-radio :label="1">总部岗</el-radio>
								<el-radio :label="2">门店岗</el-radio> 
							</el-radio-group>
						</el-form-item>
						<section class="job-type-wrapper flex-c">
							<section class="parent-post">
								<section>
									<el-form-item label="全选：" prop="job" >
										<el-checkbox v-model="state.powerSetting.parentChecked" @change="parentChangeAll" :label="1" size="large">全选/不全选</el-checkbox>
									</el-form-item>
								</section>
								<section>
									<el-form-item label="总部权限设置：" prop="job" >
										<el-scrollbar height="240px">
											<el-tree node-key="id" :data="data" ref="parentPowerNode" :props="defaultProps" show-checkbox />
										</el-scrollbar>
									</el-form-item>
								</section>
							</section>
							<section class="store-post">
								<section>
									<el-form-item label="全选：" prop="job" >
										<el-checkbox v-model="state.powerSetting.storeChecked" @change="storeChangeAll" :label="1" size="large">全选/不全选</el-checkbox>
									</el-form-item>
								</section>
								<section>
									<el-form-item label="门店权限设置：" prop="job" >
										<el-scrollbar height="240px">
											<el-tree node-key="id" :data="data" ref="storePowerNode" :props="defaultProps" show-checkbox />
										</el-scrollbar>
									</el-form-item>
								</section>
							</section>
						</section>
						<section style="text-align: center;">
							<el-button>取消</el-button>
							<el-button type="primary" @click="nextHandle">下一步</el-button>
						</section>
					</section>

					<section class=""  v-show="state.current === 3">
						<el-form :model="state.targetSetting"   label-width="120px"
							class="demo-ruleForm" status-icon>
							<el-form-item label="综合业绩目标(元)" prop="job">
								<el-input v-model="state.targetSetting.manualTarget" placeholder="请输入综合业绩目标（元）" clearable />
							</el-form-item>
							<el-form-item label="销售目标(元)" prop="basicSalary">
								<el-input v-model="state.targetSetting.cellTarget" placeholder="请输入销售目标（元）" clearable />
							</el-form-item>
							<el-form-item label="充值目标(元)" prop="name">
								<el-input v-model="state.targetSetting.rechargeTarget" placeholder="请输入充值目标（元）" clearable />
							</el-form-item>
							<el-form-item label="消耗目标(元)" prop="name">
								<el-input v-model="state.targetSetting.useTarget" placeholder="请输入消耗目标（元）" clearable />
							</el-form-item>
							<el-form-item label="手工目标(个)" prop="name">
								<el-input v-model="state.targetSetting.manualTarget" clearable placeholder="请输入服务手工数量目标（个）" />
							</el-form-item> 
							<el-form-item label="新客目标(人)" prop="name">
								<el-input v-model="state.targetSetting.useTarget" clearable placeholder="请输入新客户数量目标（人）" />
							</el-form-item>
						</el-form>
						<section style="text-align: center;" class="mt30">
							<el-button>取消</el-button>
							<el-button type="primary" @click="confirmHandle">确定</el-button>
						</section>
					</section>
				</section>
			</section>
        </el-dialog>
    </main>
</template>

<style lang='scss' scoped>
.flex-c {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.edit-info-wrapper{
	display: flex;
	justify-content: space-between;
	.left-nav{
		width: 150px;
		height: 450px;
		background-color: #efeff4;
		padding-top: 20px;
		.left-nav-item{
			padding: 10px 0;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			color: #999;
			position: relative;
			&:hover {
				color: #333;
			}
			span{
				margin-left: 5px;
			}
		}
		.active-nav{
			color: #333;
		}
		.active-nav::before {
			content: '';
			position: absolute;
			right: -6px;
			top: 13px;
			border-bottom: 12px solid #ffffff;
			border-right: 12px solid transparent;
			transform: rotate(45deg);
		}
	}
	.right-container{
		flex: 1;
		margin-left: 20px;
		.job-type-wrapper{
			.parent-post,.store-post{
				width: 50%;
			}
		}
	}
}
</style>